<template>
  <header class="banner">
    <!-- 左边导航 -->
    <div class="left_panel">
      <div class="left_container">
        <!-- 相对浏览器定位 -->
        <div>
          <div class="logo_panel">
            <router-link to="/">
              <h1>语</h1>
            </router-link>
          </div>
          <div>
            <nav>
              <!-- 首页 -->
              <router-link to="/">
                <div class="title" :title="$t('index.home')">
                  <div class="css-ico">
                    <!-- 图标 -->
                    <svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="r-18jsvk2 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"
                    >
                      <g>
                        <path
                          d="M12 9c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4zm0 6c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2zm0-13.304L.622 8.807l1.06 1.696L3 9.679V19.5C3 20.881 4.119 22 5.5 22h13c1.381 0 2.5-1.119 2.5-2.5V9.679l1.318.824 1.06-1.696L12 1.696zM19 19.5c0 .276-.224.5-.5.5h-13c-.276 0-.5-.224-.5-.5V8.429l7-4.375 7 4.375V19.5z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div class="css-ltr">{{ $t("index.home") }}</div>
                </div>
              </router-link>
              <!-- 搜索 -->
              <router-link to="/Search">
                <div class="title" :title="$t('index.search')">
                  <div class="css-ico">
                    <!-- 图标 -->
                    <svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="r-18jsvk2 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"
                    >
                      <g>
                        <path
                          d="M10.25 4.25c-3.314 0-6 2.686-6 6s2.686 6 6 6c1.657 0 3.155-.67 4.243-1.757 1.087-1.088 1.757-2.586 1.757-4.243 0-3.314-2.686-6-6-6zm-9 6c0-4.971 4.029-9 9-9s9 4.029 9 9c0 1.943-.617 3.744-1.664 5.215l4.475 4.474-2.122 2.122-4.474-4.475c-1.471 1.047-3.272 1.664-5.215 1.664-4.971 0-9-4.029-9-9z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div class="css-ltr">{{ $t("index.search") }}</div>
                </div>
              </router-link>
              <!-- 通知 -->
              <router-link to="/Notify">
                <div class="title" :title="$t('index.notification')">
                  <div class="css-ico">
                    <el-badge :is-dot="isDot">
                      <!-- 图标 -->
                      <svg
                        viewBox="0 0 24 24"
                        aria-hidden="true"
                        class="r-18jsvk2 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"
                      >
                        <g>
                          <path
                            d="M19.993 9.042C19.48 5.017 16.054 2 11.996 2s-7.49 3.021-7.999 7.051L2.866 18H7.1c.463 2.282 2.481 4 4.9 4s4.437-1.718 4.9-4h4.236l-1.143-8.958zM12 20c-1.306 0-2.417-.835-2.829-2h5.658c-.412 1.165-1.523 2-2.829 2zm-6.866-4l.847-6.698C6.364 6.272 8.941 4 11.996 4s5.627 2.268 6.013 5.295L18.864 16H5.134z"
                          ></path>
                        </g>
                      </svg>
                    </el-badge>
                  </div>
                  <div class="css-ltr">{{ $t("index.notification") }}</div>
                </div>
              </router-link>
              <!-- 私信消息 -->
              <a href="#">
                <div class="title" :title="$t('index.message')">
                  <div class="css-ico">
                    <!-- 图标 -->
                    <svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="r-18jsvk2 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"
                    >
                      <g>
                        <path
                          d="M1.998 5.5c0-1.381 1.119-2.5 2.5-2.5h15c1.381 0 2.5 1.119 2.5 2.5v13c0 1.381-1.119 2.5-2.5 2.5h-15c-1.381 0-2.5-1.119-2.5-2.5v-13zm2.5-.5c-.276 0-.5.224-.5.5v2.764l8 3.638 8-3.636V5.5c0-.276-.224-.5-.5-.5h-15zm15.5 5.463l-8 3.636-8-3.638V18.5c0 .276.224.5.5.5h15c.276 0 .5-.224.5-.5v-8.037z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div class="css-ltr">{{ $t("index.message") }}</div>
                </div>
              </a>
              <!-- 认证 -->
              <router-link to="/Auth">
                <div class="title" :title="$t('index.auth')">
                  <div class="css-ico">
                    <!-- 图标 -->
                    <svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="r-18jsvk2 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"
                    >
                      <g>
                        <path
                          d="M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div class="css-ltr">{{ $t("index.auth") }}</div>
                </div>
              </router-link>
              <!-- 个人资料 -->
              <router-link to="/Personal">
                <div class="title" :title="$t('index.personal')">
                  <div class="css-ico">
                    <!-- 图标 -->
                    <svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="r-18jsvk2 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"
                    >
                      <g>
                        <path
                          d="M5.651 19h12.698c-.337-1.8-1.023-3.21-1.945-4.19C15.318 13.65 13.838 13 12 13s-3.317.65-4.404 1.81c-.922.98-1.608 2.39-1.945 4.19zm.486-5.56C7.627 11.85 9.648 11 12 11s4.373.85 5.863 2.44c1.477 1.58 2.366 3.8 2.632 6.46l.11 1.1H3.395l.11-1.1c.266-2.66 1.155-4.88 2.632-6.46zM12 4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zM8 6c0-2.21 1.791-4 4-4s4 1.79 4 4-1.791 4-4 4-4-1.79-4-4z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div class="css-ltr">{{ $t("index.personal") }}</div>
                </div>
              </router-link>
              <!-- 更多设置 -->
              <router-link to="/Setting">
                <div class="title" :title="$t('index.more')">
                  <div class="css-ico">
                    <!-- 图标 -->
                    <svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      class="r-18jsvk2 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"
                    >
                      <g>
                        <path
                          d="M3.75 12c0-4.56 3.69-8.25 8.25-8.25s8.25 3.69 8.25 8.25-3.69 8.25-8.25 8.25S3.75 16.56 3.75 12zM12 1.75C6.34 1.75 1.75 6.34 1.75 12S6.34 22.25 12 22.25 22.25 17.66 22.25 12 17.66 1.75 12 1.75zm-4.75 11.5c.69 0 1.25-.56 1.25-1.25s-.56-1.25-1.25-1.25S6 11.31 6 12s.56 1.25 1.25 1.25zm9.5 0c.69 0 1.25-.56 1.25-1.25s-.56-1.25-1.25-1.25-1.25.56-1.25 1.25.56 1.25 1.25 1.25zM13.25 12c0 .69-.56 1.25-1.25 1.25s-1.25-.56-1.25-1.25.56-1.25 1.25-1.25 1.25.56 1.25 1.25z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div class="css-ltr">{{ $t("index.more") }}</div>
                </div>
              </router-link>
            </nav>
          </div>
        </div>
        <div class="left_btn_panel">
          <el-button
            type="primary"
            @click="postDialogFormVisible = true"
            round
            >{{ $t("index.post") }}</el-button
          >
          <div
            class="add_post"
            @click="postDialogFormVisible = true"
            :title="$t('index.post')"
          >
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <g>
                <path
                  d="M23 3c-6.62-.1-10.38 2.421-13.05 6.03C7.29 12.61 6 17.331 6 22h2c0-1.007.07-2.012.19-3H12c4.1 0 7.48-3.082 7.94-7.054C22.79 10.147 23.17 6.359 23 3zm-7 8h-1.5v2H16c.63-.016 1.2-.08 1.72-.188C16.95 15.24 14.68 17 12 17H8.55c.57-2.512 1.57-4.851 3-6.78 2.16-2.912 5.29-4.911 9.45-5.187C20.95 8.079 19.9 11 16 11zM4 9V6H1V4h3V1h2v3h3v2H6v3H4z"
                ></path>
              </g>
            </svg>
          </div>
        </div>
        <!-- 弹出发帖输入框 -->
        <el-dialog
          width="600px"
          title="发帖"
          :visible.sync="postDialogFormVisible"
          :append-to-body="true"
        >
          <UserPostComponents @savePost="savePost" />
        </el-dialog>
      </div>
    </div>
  </header>
</template>
<script>
import UserPostComponents from "@/components/UserPostComponents.vue";
export default {
  name: "HeaderBanner",
  props: {
    notifyCounts: Number,
  },
  components: {
    UserPostComponents,
  },
  data() {
    return {
      isDot: false, //消息提示
      postDialogFormVisible: false,
      postForm: {
        content: "",
        imglist: "",
      },
    };
  },
  mounted() {
    this.loadNotify();
  },
  methods: {
    loadNotify() {
      if (this.notifyCounts > 0) {
        this.isDot = true;
      } else {
        this.isDot = false;
      }
    },
    savePost() {
      this.postDialogFormVisible = false;
      this.$emit("refleshload");
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 左侧栏 */
.banner {
  width: 260px;
  min-height: 415px;
  background-color: #ffffff;
  margin-right: 15px;
  border-radius: 5px;
  padding: 10px;
}

.left_panel {
  width: 260px;
  /* 黏性定位 */
  position: sticky !important;
  top: 0;
  background-color: #ffffff;
  z-index: 99;
}

.left_container {
  /* sticky粘性 */
  /* position: sticky; */
  /* top:0; */
  height: 100%;
}

/* .logo_panel{
	padding: 2 0;
} */

.logo_panel h1 {
  margin-left: 10px;
  font-size: 28px;
  padding: 10px 0;
}

nav a {
  color: #333333;
}

nav a .title {
  font-size: 18px;
  padding: 8px 10px;
  display: flex;
}

nav a:hover .title {
  background-color: #c0bcbc;
  -webkit-box-align: stretch;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  border-radius: 5px;
}

nav .css-ico svg {
  vertical-align: top;
  width: 24px;
  height: 24px;
  color: rgba(15, 20, 25, 1);
  /* vertical-align: text-bottom; */
}

nav .css-ltr {
  line-height: 24px;
  margin-left: 20px;
  margin-right: 16px;
}

/* 左侧发帖按钮 */
.left_btn_panel {
  margin: 16px 0;
  display: flex;
}

.left_btn_panel .el-button {
  width: 80%;
}

.add_post {
  display: none;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-align: center;
  cursor: pointer;
}

.add_post svg {
  fill: #ffffff;
  width: 24px;
  /* svg在div内上下居中，设置svg高度=div容器高度 */
  height: 40px;
}

@media screen and (max-width: 720px) {
  .banner {
    display: none;
  }
}

@media screen and (max-width: 1050px) {
  .logo_panel h1 {
    margin-left: 8px;
  }
}

@media (max-width: 1300px) {
  .banner {
    width: auto;
  }

  .left_panel {
    width: auto;
  }

  .logo_panel h1 {
    margin-left: 8px;
  }

  nav a .title {
    padding: 8px;
    -webkit-box-orient: vertical;
    text-align: center;
  }

  nav a:hover .title {
    border-radius: 50%;
  }

  nav .css-ltr {
    display: none;
  }

  /* 发帖按钮 */
  .add_post {
    display: block;
  }

  .left_btn_panel .el-button {
    display: none;
  }
}
</style>
<style>
.el-dialog {
  border-radius: 15px !important;
}
</style>